<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>05_版心与居中测试</title>
        <style>
            * { /*去除所有元素自带的内外间距*/
                margin:0;
                padding:0;
            }
            .main {
                background-color: #808080;
                
            }
            .center {
                /*版心需要设置固定的宽度且居中*/
                width:1000px;
                background-color: #e8e8e8;
                margin:0 auto;
            }
            .card {
                width:200px;
                height:200px;
                background-color: yellow;
                margin:0 auto; /*让块级卡片自己在版心里居中*/
                border:5px solid red;
                text-align:center;
                line-height:200px;
            }
            
            
        </style>
        
    </head>
    <body>
        <!-- 最外层功能块-->
        <div class="main">
            <!-- 版心-->
            <div class="center">
                <!-- 主要展示内容-->
                <div class="card">我是版心内容1</div>
                <div class="card">我是版心内容2</div>
                <div class="card">我是版心内容3</div>
                <div class="card">我是版心内容4</div>
            </div>
            
        </div>

    
    </body>
</html>